<template>
  <div class="app-container">

    <u-page title="导购设置">
      <div slot="header">
        <el-button type="primary" @click="updateData">保存</el-button>
      </div>

      <el-form ref="dialogForm" :model="dataForm" label-width="90px">
        <el-tabs v-model="active">
          <el-tab-pane label="页面设置" name="first">
            <el-card shadow="never" class="panel">
              <el-form-item label="背景图片" prop="thumb">
                <u-upload v-model="dataForm.thumb" name="file" />
              </el-form-item>
              <el-form-item label="员工手册" prop="policy">
                <u-tinymce v-model="dataForm.policy" :height="400" />
              </el-form-item>
            </el-card>

          </el-tab-pane>

          <el-tab-pane label="钉钉流程" name="second">
            <el-card shadow="never" class="panel">
              <el-form-item label="正式人员审批实例ID" prop="processInstanceId" label-width="150px">
                <el-input v-model="dataForm.processInstanceId" placeholder="钉钉正式人员OA审批实例ID" maxlength="100" show-word-limit clearable />
              </el-form-item>

              <el-form-item label="创建人" prop="processCreatorUserId">
                <el-input v-model="dataForm.processCreatorUserId" placeholder="钉钉OA创建人ID" maxlength="100" show-word-limit clearable />
              </el-form-item>
            </el-card>
          </el-tab-pane>

          <el-tab-pane label="企微设置" name="second2">
            <el-card shadow="never" class="panel">
              <el-form-item label="部门ID" prop="weWorkDeptId">
                <el-input v-model="dataForm.weWorkDeptId" placeholder="企微待入职默认部门ID" maxlength="100" show-word-limit clearable />
              </el-form-item>
            </el-card>
          </el-tab-pane>

          <el-tab-pane label="餐卡设置" name="fourth">

            <el-card shadow="never" class="panel">

              <el-form-item label="餐卡模板" prop="mealCouponTemplateId">
                <ues-coupon v-model="dataForm.mealCouponTemplateId" />
              </el-form-item>

            </el-card>

          </el-tab-pane>

          <el-tab-pane label="黑名单" name="fifth">

            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>黑名单</h4>
                  <span>开启后将限制名单参与</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.blacklistEnabled" class="panel-switch" />
                </div>
              </div>
              <div v-if="dataForm.blacklistEnabled" style="margin-top: 20px;">
                <el-input v-model="dataForm.blackContent" type="textarea" placeholder="批量操作名单,手机号" clearable rows="10" style="margin-top: 10px" />
                <u-tip-info title="格式: 手机号+换行或者英文逗号" />
              </div>
            </el-card>
          </el-tab-pane>


          <el-tab-pane label="登录设置" name="fifth2">

            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>登录规则</h4>
                  <span>开启后将启用登录规则</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.enabledLoginRules" class="panel-switch" />
                </div>
              </div>
              <div v-if="dataForm.enabledLoginRules" style="margin-top: 20px;">
                <el-form-item label="锁定天数" prop="lockAfterDays">
                  <el-input v-model="dataForm.lockAfterDays" placeholder="锁定天数" maxlength="100" show-word-limit clearable >
                    <template slot="append">天</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="离职天数" prop="resignAfterDays">
                  <el-input v-model="dataForm.resignAfterDays" placeholder="离职天数" maxlength="100" show-word-limit clearable >
                    <template slot="append">天</template>
                  </el-input>
                </el-form-item>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </u-page>

  </div>
</template>
<script>

import uesCoupon from '@/components/coupon/uesCoupon.vue'

export default {
  components: { uesCoupon },
  data() {
    return {
      api: this.$u.api.PluginsGuideConfig,
      active: 'first',
      dataForm: {
        policy: '',
        thumb: ''
      }
    }
  },
  created() {
    this.getLoad()
  },
  methods: {
    // 初始化数据
    getLoad() {
      this.api.fetch().then(res => {
        this.dataForm = res.data
      })
    },
    // 提交编辑数据
    updateData() {
      const self = this
      this.$confirm('确认更改导购配置', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.$refs['dialogForm'].validate((valid) => {
          if (valid) {
            self.api.update(self.dataForm).then(() => {
              self.getLoad()
              self.$u.msg('保存成功')
            })
          }
        })
      }).catch(() => {
      })
    }
  }

}
</script>

<style lang="scss" scoped>

.panel{
  margin-bottom: 20px;
  .panel-body{
    display:flex;
    justify-content:space-between;

    .panel-header{
      display: flex;
      flex-flow: column;
      color: #999;
      font-size: 12px;

      h4{
        font-size: 14px;
        color: #000;
      }
    }

    .panel-switch{
      margin-top: 20px;
    }
  }
}

</style>
